<template>
  <div class="container">
    <Breadcrumb :items="['menu.produce', 'menu.visualization.temperature']" />
    <a-space direction="vertical" :size="12" fill>
      <div class="space-unit">
        <!-- 数据总览 -->
        <TitleCommon :titleCommonInfo="titleCommonInfo" />
      </div>
      <!-- 地温记录 -->
      <div class="space-unit">
        <GroundTotay
          :groundTotayList="groundTotayList"
          :getGroundTotayInfo="getGroundTotayInfo"
        />
      </div>
      <!-- 数据总览 -->
      <div class="space-unit">
        <DataInfo :dataInfoList="dataInfoList" :getWorkshop="getWorkshop" />
      </div>
      <!-- 数据详情 -->
      <div class="space-unit">
        <GroupInfo
          :tempInfoList="tempInfoList"
          :gettempInfo="gettempInfo"
          :groupedArray="groupedArray"
        />
      </div>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
import { getworkshop, getTempInfo, getGroundTotay } from '@/api/produce';
import TitleCommon from './components/titleCommon.vue';
import DataInfo from './components/dataInfo.vue';
import GroupInfo from './components/groupInfo.vue';
import GroundTotay from './components/ground-totay.vue';

const groundTotayList = ref([]);
const titleCommonInfo = ref({
  workTotal: 0,
  groupTotal: 0,
  tempTotal: 0,
});
const tempInfoList = ref([]);
const dataInfoList = ref([]);
const groupedArray = ref([]);
const gettempInfo = async () => {
  const { data, code } = await getTempInfo();
  if (code === 200) {
    data.forEach((item: any) => {
      if (item.start_time) {
        item.start_time = dayjs(item.start_time).format('YYYY-MM-DD');
        item.temp_str = JSON.parse(item.temp_str);
        const properties = [
          'one',
          'two',
          'three',
          'four',
          'five',
          'six',
          'seven',
          'eight',
          'nine',
          'ten',
          'eleven',
          'twelve',
          'thirteen',
          'fourteen',
          'fifteen',
        ];
        for (let i = 0; i < properties.length; i++) {
          item[properties[i]] = item.temp_str[i];
        }
      }
    });
    const groupedByGroupId = data.reduce((acc, item) => {
      // 如果acc中还没有这个group_id的数组，就初始化一个空数组
      if (!acc[item.group_id]) {
        acc[item.group_id] = [];
      }
      // 将当前item添加到对应group_id的数组中
      acc[item.group_id].push(item);
      // 返回acc，供下一次迭代使用
      return acc;
    }, {});
    // 如果你想要一个数组形式的分组结果（每个子数组对应一个group_id），可以这样做：
    const groupedArrayNow = Object.values(groupedByGroupId);
    groupedArray.value = groupedArrayNow;
    console.log(groupedArray);

    tempInfoList.value = data;
  }
};
// 获取地温
const getGroundTotayInfo = async () => {
  groundTotayList.value.forEach(async (item) => {
    let params = {
      workshop_id: item.workshop_id,
    };
    const { data, code } = await getGroundTotay(params);
    if (code === 200) {
      item.data = [];
      data.forEach((entity) => {
        let temp_str = JSON.parse(entity.temp_str);
        let groundOneData = {
          id: entity.id,
          record_time: dayjs(entity.record_time).format('YYYY-MM-DD'),
          showRecord_time: dayjs(entity.record_time).format('MM-DD'),
        };
        for (const key in item.initCloumns) {
          groundOneData[item.initCloumns[key]] =
            temp_str[key] === '' ? '暂未录入' : temp_str[key];
        }
        item.data.push(groundOneData);
      });
    }
  });
};
// 获取车间、分组、品温个数
const getWorkshop = async () => {
  const { data, code } = await getworkshop();
  if (code === 200) {
    dataInfoList.value = [];
    groundTotayList.value = [];
    titleCommonInfo.value.workTotal = data.length;
    titleCommonInfo.value.groupTotal = 0;
    titleCommonInfo.value.tempTotal = 0;
    data.forEach((item: any) => {
      let groundTotalInfo = {
        workshop_alias: item.workshop_alias,
        workshop_id: item.workshop_id,
        columns: [
          {
            title: '时间',
            dataIndex: 'showRecord_time',
            fixed: 'left',
            width: 80,
          },
        ],
        data: [],
        initCloumns: [],
      };
      let oneData = {
        key: `${item.workshop_id}work`,
        name: item.workshop_alias,
        group: item.group_total,
        temp: item.tempTotal,
        workshop_id: item.workshop_id,
      };
      if (item.children) {
        oneData.children = [];
        item.children.forEach((child: any) => {
          groundTotalInfo.columns.push({
            title: child.group_alias,
            dataIndex: `${child.group_id}group`,
          });
          groundTotalInfo.initCloumns.push(`${child.group_id}group`);
          let twoData = {
            key: `${child.group_id}group`,
            name: child.group_alias,
            temp: child.tempTotal,
            group_id: child.group_id,
            workshop_id: item.workshop_id,
          };
          if (child.children) {
            twoData.children = [];
            child.children.forEach((three: any) => {
              let threeData = {
                key: `${three.recordID}temp`,
                name: three.temperatureAlias,
                recordID: three.recordID,
                group_id: child.group_id,
              };
              twoData.children.push(threeData);
            });
          }
          oneData.children.push(twoData);
        });
      }
      groundTotalInfo.columns.push({
        title: '操作',
        dataIndex: 'operate',
        slotName: 'operate',
        width: 80,
      });
      groundTotayList.value.push(groundTotalInfo);
      dataInfoList.value.push(oneData);
      titleCommonInfo.value.groupTotal += item.group_total;
      titleCommonInfo.value.tempTotal += item.tempTotal;
    });
    getGroundTotayInfo();
  }
};
getWorkshop();
gettempInfo();
</script>

<script lang="ts">
export default {
  name: 'temperature',
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.title-fix {
  margin: 0 0 12px 0;
  font-size: 14;
}
:deep(.section-title) {
  margin: 0 0 12px 0;
  font-size: 14px;
}
</style>
